<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>员工信息</title>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
<div id="myApp">

    <el-form :inline="true" class="demo-form-inline">

        <el-form-item label="姓名">
            <el-input v-model="query.employerName" placeholder="姓名"></el-input>
        </el-form-item>

        <el-form-item label="性别">
            <el-select v-model="query.gender" placeholder="性别">
                <el-option label="" value=""></el-option>
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="queryData">查询</el-button>
            <el-button type="primary" @click="addPage">新增</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="list" style="width: 100%">
        <el-table-column label="编号" prop="employerId"></el-table-column>
        <el-table-column label="姓名" prop="employerName"></el-table-column>
        <el-table-column label="性别">
            <template slot-scope="x">
                <el-tag  v-if="x.row.gender==1">男</el-tag>
                <el-tag type="danger" v-if="x.row.gender==2">女</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="出生日期" prop="dateBirth"></el-table-column>
        <el-table-column label="联系电话" prop="phone"></el-table-column>
        <el-table-column label="邮箱地址" prop="email"></el-table-column>
        <el-table-column label="学历">
            <template slot-scope="x">
                <el-tag type="success" v-if="x.row.education==0">无</el-tag>
                <el-tag type="success" v-if="x.row.education==1">小学</el-tag>
                <el-tag type="success" v-if="x.row.education==2">初中</el-tag>
                <el-tag type="success" v-if="x.row.education==3">高中</el-tag>
                <el-tag type="success" v-if="x.row.education==4">本科</el-tag>
                <el-tag type="success" v-if="x.row.education==5">硕士</el-tag>
                <el-tag type="success" v-if="x.row.education==6">博士</el-tag>
                <el-tag type="success" v-if="x.row.education==7">其他</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="部门" prop="department"></el-table-column>
        <el-table-column label="职务" prop="position"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="x">
                <el-button type="primary" icon="el-icon-edit" circle @click="updatePage(x.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="del(x.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[3, 5, 7, 10]"
            :page-size="query.row"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--员工新增的对话框-->
    <el-dialog
            title="员工新增"
            :visible.sync="addShow"
            width="30%"
    >
        <el-form ref="form"  label-width="80px">

            <el-form-item label="姓名">
                <el-input  v-model="parameter.employerName" ></el-input>
            </el-form-item>

            <el-form-item label="性别">
                <el-select   v-model="parameter.gender" placeholder="请选择性别">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="出生日期">
                <el-input v-model="parameter.dateBirth" ></el-input>
            </el-form-item>

            <el-form-item label="联系电话">
                <el-input v-model="parameter.phone" ></el-input>
            </el-form-item>

            <el-form-item label="邮箱地址">
                <el-input v-model="parameter.email" ></el-input>
            </el-form-item>

            <el-form-item label="学历">
                <el-select   v-model="parameter.education" placeholder="请选择学历">
                    <el-option label="无" value="0"></el-option>
                    <el-option label="小学" value="1"></el-option>
                    <el-option label="初中" value="2"></el-option>
                    <el-option label="高中" value="3"></el-option>
                    <el-option label="本科" value="4"></el-option>
                    <el-option label="硕士" value="5"></el-option>
                    <el-option label="博士" value="6"></el-option>
                    <el-option label="其他" value="7"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="部门">
                <el-input v-model="parameter.department" ></el-input>
            </el-form-item>

            <el-form-item label="职务">
                <el-input v-model="parameter.position" ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="add">新增</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


    <!--员工修改的对话框-->
    <el-dialog
            title="员工修改"
            :visible.sync="updateShow"
            width="30%"
    >
        <el-form ref="form"  label-width="80px">

            <el-form-item label="编号">
                <el-input  v-model="parameterUpdate.employerId" disabled></el-input>
            </el-form-item>

            <el-form-item label="姓名">
                <el-input  v-model="parameterUpdate.employerName" ></el-input>
            </el-form-item>

            <el-form-item label="性别">
                <el-select   v-model="parameterUpdate.gender" placeholder="请选择性别">
                    <el-option label="" value=""></el-option>
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="出生日期">
                <el-input v-model="parameterUpdate.dateBirth" ></el-input>
            </el-form-item>

            <el-form-item label="联系电话">
                <el-input v-model="parameterUpdate.phone" ></el-input>
            </el-form-item>

            <el-form-item label="邮箱地址">
                <el-input v-model="parameterUpdate.email" ></el-input>
            </el-form-item>

            <el-form-item label="学历">
                <el-select   v-model="parameterUpdate.education" placeholder="请选择学历">
                    <el-option label="无" value="0"></el-option>
                    <el-option label="小学" value="1"></el-option>
                    <el-option label="初中" value="2"></el-option>
                    <el-option label="高中" value="3"></el-option>
                    <el-option label="本科" value="4"></el-option>
                    <el-option label="硕士" value="5"></el-option>
                    <el-option label="博士" value="6"></el-option>
                    <el-option label="其他" value="7"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="部门">
                <el-input v-model="parameterUpdate.department" ></el-input>
            </el-form-item>

            <el-form-item label="职务">
                <el-input v-model="parameterUpdate.position" ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="update">修改</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>
</body>

<script>
    // 创建vue对象
    new Vue({
        el: "#myApp", // 作用页面的范围
        data:{ //数据模型
            parameter:{//请求参数对象
                employerName:"",
                gender:"",
                dateBirth:"",
                phone:"",
                email:"",
                education:"",
                department:"",
                position:"",
            },
            parameterUpdate:{//修改请求参数对象
                employerId:"",
                employerName:"",
                gender:"",
                dateBirth:"",
                phone:"",
                email:"",
                education:"",
                department:"",
                position:"",
            },
            query:{ // 查询
                userName:"",
                role:"",
                page:1,
                row:3,
            },
            total:0, // 总记录数
            list:[], //定义数组
            addShow:false,//是否显示新增对话框
            updateShow:false//是否显示修改对话框
        },
        methods:{//函数，方法
            handleSizeChange(row){ // 下拉框出触发的事件
                this.query.page = 1;
                this.query.row = row;
                this.queryData();
            },
            handleCurrentChange(page){ // 页码发生改变触发的事件
                this.query.page = page;
                this.queryData();
            },
            del(obj) {
                //把vue对象传递一个变量self
                const self = this;
                // 定义一个确认框
                this.$confirm("你确定要删除吗？","提示").then(function () {
                    $.ajax({
                        url:"/employer/del",
                        data:{
                            "id":obj.employerId
                        },//参数
                        success:function (rs) {
                            if(rs.code==200){
                                //刷新数据
                                self.queryData();
                            } else{
                                //提示
                                self.$alert(rs.msg);
                            }
                        }
                    })
                })
            },
            add(){//新增操作
                //把vue对象传递一个变量self
                const self = this;
                $.ajax({
                    url:"/employer/add",
                    data:this.parameter,//参数
                    success:function (rs) {
                        if(rs.code==200){
                            //关闭新增对话框
                            self.addShow = false;
                            //刷新数据
                            self.queryData();
                        } else{
                            //提示
                            self.$alert(rs.msg);
                        }
                    }
                })
            },
            addPage(){//新增对话框
                //打开新增对话框
                this.addShow = true;
            },
            update() {//修改操作
                //把vue对象传递一个变量self
                const self = this;
                $.ajax({
                    url:"/employer/update",
                    type:"post",
                    data:JSON.stringify(this.parameterUpdate),//参数
                    contentType:"application/json",//告诉服务器，发送的数据是json格式
                    success:function (rs) {
                        if(rs.code==200){
                            //关闭修改对话框
                            self.updateShow = false;
                            //刷新数据
                            self.queryData();
                        } else{
                            //提示
                            self.$alert(rs.msg);
                        }
                    }
                })
            },
            updatePage(obj){//修改对话框
                // 把选中行的数据赋值给parameterUpdate对象
                this.parameterUpdate = obj;
                this.updateShow = true;
            },
            queryData(){//用户查询
                //把vue对象传递一个变量self
                const self = this;
                //发送ajax请求，来获取服务端返回的数据
                $.ajax({
                    url:"/employer/query",//服务器接口地址
                    data:this.query,//参数
                    success:function (rs) {//成功访问到服务器后执行的函数，rs ：服务端传来的数据
                        //打印信息
                        console.log(rs);
                        if(rs.code==200){
                            self.list = rs.data.list;
                            self.total = rs.data.total;
                        }else{
                            self.$message(rs.msg);
                            //清空
                            self.list =[]
                        }
                    }
                })
            }
        },
        mounted(){//生命周期函数，页面加载完毕就会执行函数
            //访问查询函数
            this.queryData();
        }
    })
</script>
</html>
